<template>
  <div>
    <div class="box">
      <el-table
        id="tab"
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          id="tab"
          prop="title"
          label="日期"
          fixed
          width="210"
          style="color: red !important"
        />

        <el-table-column prop="payMony" label="支付金额">
          <template slot-scope="scope">
            <count-to :start="0" :end="scope.row.payMony" :duration="2600" />
          </template>
        </el-table-column>

        <el-table-column prop="payMonyCount" label="支付笔数">
          <template slot-scope="scope">
            <count-to
              :start="0"
              :end="scope.row.payMonyCount"
              :duration="2600"
            />
          </template>
        </el-table-column>

        <el-table-column prop="refundMony" label="退款金额">
          <template slot-scope="scope">
            <count-to :start="0" :end="scope.row.refundMony" :duration="2600" />
          </template>
        </el-table-column>
        <el-table-column prop="refundMonyCount" label="退款笔数">
          <template slot-scope="scope">
            <count-to
              :start="0"
              :end="scope.row.refundMonyCount"
              :duration="2600"
            />
          </template>
        </el-table-column>
        <el-table-column prop="realMony" label="实际应收金额">
          <template slot-scope="scope">
            <count-to :start="0" :end="scope.row.realMony" :duration="2600" />
          </template>
        </el-table-column>
        <el-table-column prop="recerror" label="对账异常笔数" cl>
          <template slot-scope="scope">

            <el-button
              type="text"
              size="small"
              :class="[scope.row.recerror > 0 ? 'numbers red' : '', 'numbers']"
              @click="recerrorclick"
            >
              {{ scope.row.recerror }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-number-scroll'
import { AjaxToken } from '@/api/common'
import { Loading } from 'element-ui'
import { date } from 'jszip/lib/defaults'
import 'url-search-params-polyfill'
export default {
  components: {
    CountTo
  },
  props: {
    StDt: '',
    EdDt: '',
    CpnID: '',
    ChnanelId: ''
  },
  data() {
    return {
      loading: false,
      tableData: []
    }
  },

  watch: {
    refsh: {
      deep: true,
      handler(val) {
        this.Seach()
      }
    },
    CpnID: {
      deep: true,
      handler(val) {
        this.Seach()
      }
    },
    ChnanelId: {
      deep: true,
      handler(val) {
        this.Seach()
      }
    },
    selectType: {
      deep: true,
      handler(val) {
        this.Seach()
      }
    },
    StDt: {
      deep: true,
      handler(val) {
        this.Seach()
      }
    },
    EdDt: {
      deep: true,
      handler(val) {
        this.Seach()
      }
    }
  },
  created() {
    this.Seach()
  },
  methods: {
    Seach() {
      this.loading = true
      this.loadingmouth = true
      var params = new URLSearchParams()
      params.append('CpnID', this.CpnID)
      params.append('ChannelName', this.ChnanelId)
      params.append('Tp', '0')
      params.append('StDt', this.StDt)
      params.append('EdDt', this.EdDt)
      backstage.GetPanelTable(this, params)
    },
    recerrorclick() {
      debugger
      this.$router.push({ path: '/Reconciliation/Rcncbtch' }) // 当月
    }
  }
}

var backstage = {
  // 获取Pymcverrcd集合
  GetPanelTable: function(thisobj, params) {
    AjaxToken(
      thisobj,
      'GetPanelTable',
      params,
      'post',
      function(res) {
        var body = res.data.data
        thisobj.tableData = body
        thisobj.loading = false
      },
      function(err) {
        thisobj.loading = false
      }
    )
  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 32px 28px;
  background: #ffffff !important;
}
.el-table {
  margin: 0px;
  padding: 0px;
  /* // width: 100%; */
  width: 1550px;
  height: 100%;
  border-radius: 2px;
  background: #ffffff;
}
::v-deep .has-gutter {
  font-size: 14px !important;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  background: #fafafa !important;
}
::v-deep .has-gutter tr th {
  background: #fafafa !important;
}
::v-deep .has-gutter cell {
  font-size: 14px !important;
  font-family: HelveticaNeue;
  color: rgba(0, 0, 0, 0.65);
}

::v-deep .el-table .cell {
  text-align: center;
  font-size: 14px !important;
  line-height: 22px;
}
::v-deep .el-table__row .el-table_1_column_1 {
  background: #fafafa !important;
  font-size: 14px !important;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
}
::v-deep .el-table_1_column_1 {
  background: #fafafa !important;
}
::v-deep .el-table__row .el-table_1_column_1 .cell {
  font-weight: bold !important;
}
.red {
  color: red;
}
::v-deep td:nth-of-type(1){
background: #FAFAFA !important;
}
::v-deep th:nth-of-type(1){
background: #FAFAFA !important;
}
</style>
